<template>
  <div class="common-mobile-view food-record">
    <el-tabs v-model="foodStore.recordSegment"
             stretch class="record-tabs"
             @tab-click="handleClick">
      <el-tab-pane label="菜谱" name="recipe">
        <food-recipe v-loading="foodStore.isLoading" element-loading-text="加载中"/>
      </el-tab-pane>
      <el-tab-pane label="日历" name="daily">
        <food-daily v-loading="foodStore.isLoading" element-loading-text="加载中"/>
      </el-tab-pane>
      <el-tab-pane label="时间轴" name="timeline">
        <food-timeline v-loading="foodStore.isLoading" element-loading-text="加载中"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import FoodRecipe from '@/components/Food/FoodRecipe.vue'
import FoodDaily from '@/components/Food/FoodDaily.vue'
import FoodTimeline from '@/components/Food/FoodTimeline.vue'
import { useFoodStore } from '@/store/food'
import type { TabsPaneContext } from 'element-plus'
import { onMounted } from 'vue'

const foodStore = useFoodStore()

onMounted(async () => {
  await foodStore.queryCategory()
  await foodStore.queryRecipeList()
})

const handleClick = async (tab: TabsPaneContext) => {
  switch (tab.paneName) {
    case 'recipe':
      await foodStore.queryCategory()
      await foodStore.queryRecipeList()
      break
    case 'daily':
      foodStore.queryDateType = 'month'
      await foodStore.queryRecordList()
      break
    case 'timeline':
      foodStore.queryDateType = 'year'
      await foodStore.queryRecordList()
      break
    default:
      break
  }
}
</script>

<style scoped lang="scss">
.food-record {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
</style>
